<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/bootstrap/bootstrap-select.min.css">
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
</head>
<body>
	<div id="app"  class="container-fluid">
	
		<div class="row">
			<div class="col-xs-9">
				<form class="form-inline">
				  <!-- <div class="form-group">
				    <label for="exampleInputName2">选择数据库</label>
				    <select v-model="selectTable" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="select($event)">
						<option>选择数据库</option>
						<option v-bind:value="table.tableName" v-for="(table, index) in tables" >{{table.tableName}}</option>
					</select>
				  </div> -->
				  <div class="form-group">
				    <label for="exampleInputName2">选择表</label>
				    <select v-model="selectTable" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="select($event)">
						<option>选择表</option>
						<option v-bind:value="table.tableName" v-for="(table, index) in tables" >{{table.tableName}}</option>
					</select>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputName2">执行条数</label>
				    <input class="form-control" type="number" v-model="number">
				  </div>
				  <button type="button" class="btn btn-default" v-on:click="save">保存</button>
				  <button type="button" class="btn btn-default" v-on:click="execute">执行</button>
				  
				   <div class="form-group" style="float: right;">
				    <label for="exampleInputName2">选择配置文件</label>
				    <select v-model="selectFile" class="selectpicker show-tick form-control" data-live-search="true" v-on:change="selectFile($event)">
						<option>选择配置文件</option>
						<option v-bind:value="file.path" v-for="(file, index) in files" >{{file.name}}</option>
					</select>
				  </div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<div class="table-responsive">
					<table class="table" style="width: 100%">
						<thead  style="width: 100%">
							<tr  style="width: 100%">
								<th width="20%">列名</th>
								<th width="10%">数据类型</th>
								<th width="10%">键</th>
								<th width="30%">备注</th>
								<th width="10%">处理器</th>
								<th width="20%">参数</th>
							</tr>
						</thead>
						
						<tbody  style="width: 100%">
							<tr v-for="(column, index) in columns"  style="width: 100%">
								<td width="20%">{{column.columnName}}</td>
								<td width="10%">{{column.columnType}}</td>
								<td width="10%">{{column.columnKey}}</td>
								<td width="30%">{{column.columnComment}}{{index}}</td>
								<td width="10%">
									<select class="form-control" v-on:change="processSelect($event, index)">
										<option>选择处理器</option>
										<option v-bind:value="index" v-for="(pro, index) in process">{{pro.name}}</option>
									</select>
								</td>
								<td width="20%"><!--  v-html="column.html" -->
									<div v-if="column.process != undefined" >
										<div v-for="(html, htmlIndex) in column.process.html">
											<input v-bind:type="html.type" v-bind:placeholder="html.name" v-model="html.value" class='form-control'>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" src="/js/vue/vue.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/page/helloWorld.js"></script>
</html>